<div id="<?php echo $this->panel->getDivID() ?>">
    <div class="RM_advancedsearch_pickupdropoff_container">
        <table width="90%" border="0" cellpadding="0" cellspacing="0" align="center" class="RM_advancedsearch_formrow">
            <tr>
                <td class="RM_advancedsearch_leftcolumn">
                    <?php echo $this->_translate->_('User.PickupDropoff.Search','CollectionFrom');?>
                    
                </td>
                <td>
                    <div id="rm_pickupdropoff_pickup"></div>
                </td>
            </tr>
            <tr>
                <td class="RM_advancedsearch_leftcolumn">
                    <?php echo $this->_translate->_('User.PickupDropoff.Search','ReturnTo');?>
                </td>
                <td>
                    <br/><div id="rm_pickupdropoff_dropoff"></div>
                </td>
            </tr>
        </table>
    </div>
</div>
<input type="hidden" id="search[pickup]" name="search[pickup]">
<input type="hidden" id="search[dropoff]" name="search[dropoff]">

<script type="text/javascript">

// get the combo data
var PickupDropoff_Locations_ArrayStore = new Ext.data.JsonStore({
    fields:[
        {name: "id"},
        {name: "name"}
    ],
    url: RM.Common.AssembleURL({
        controller: 'PickupDropoff',
        action: 'getlocationsjson'
    })
});
PickupDropoff_Locations_ArrayStore.load();

// pickup combo
var PickupDropoff_Locations_Pickup_Combo = new Ext.form.ComboBox({
    id: 'rm-pickupdropoff-pickup-combo',
    mode: 'local',
    displayField: "name",
    valueField: "id",
    triggerAction: 'all',
    typeAhead: true,
    store: PickupDropoff_Locations_ArrayStore,
    renderTo: 'rm_pickupdropoff_pickup',
    listeners:{
        'change': function(){
            document.getElementById('search[pickup]').value = Ext.getCmp("rm-pickupdropoff-pickup-combo").getValue();
        }
    }
});

// dropoff combo
var PickupDropoff_Locations_Dropoff_Combo = new Ext.form.ComboBox({
    id: 'rm-pickupdropoff-dropoff-combo',
    mode: 'local',
    displayField: "name",
    valueField: "id",
    triggerAction: 'all',
    typeAhead: true,
    store: PickupDropoff_Locations_ArrayStore,
    renderTo: 'rm_pickupdropoff_dropoff',
    listeners:{
        'change': function(){
            document.getElementById('search[dropoff]').value = Ext.getCmp("rm-pickupdropoff-dropoff-combo").getValue();
        }
    }
});

if(typeof(RM_advanced_search_form_items) !== 'undefined') {
    RM_advanced_search_form_items.push('search[pickup]');
    RM_advanced_search_form_items.push('search[dropoff]');
}
</script>